<template>
  <div class="test-api">
    <h2>API测试页面</h2>
    <button @click="testRegisterApi" class="test-button">测试挂号列表API</button>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else-if="data" class="result">
      <h3>成功获取数据!</h3>
      <pre>{{ JSON.stringify(data, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request'

const loading = ref(false)
const error = ref('')
const data = ref(null)

const testRegisterApi = async () => {
  loading.value = true
  error.value = ''
  data.value = null
  
  try {
    // 使用配置好的axios实例发送请求
    const response = await request.get('/registers')
    data.value = response.data
  } catch (err) {
    error.value = `请求失败: ${err.message}`
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.test-api {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.test-button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}
.test-button:hover {
  background-color: #3aa876;
}
.loading, .error, .result {
  padding: 10px;
  border-radius: 4px;
}
.loading {
  background-color: #e3f2fd;
  color: #1976d2;
}
.error {
  background-color: #ffebee;
  color: #d32f2f;
}
.result {
  background-color: #e8f5e9;
  color: #2e7d32;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-top: 10px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>